<template>
	<view class="wrapper">
		<!-- 用户信息 -->
		<view v-if="!userInfo.avatar" class="default">
			<image src="@/static/icons/defaultPhoto.png" mode="aspectFill"></image>
			<button @click="login">点击登录</button>
		</view>
		<view v-else class="root">
			<navigator url="/page_mine/User">
				<image class="photo" :src="userInfo.avatar" mode="aspectFill"></image>
			</navigator>
			<span class="nickname">{{userInfo.name}}</span>
		</view>
		<!-- 用户操作菜单 -->
		<view class="user_menu">
			<!-- 物品管理 -->
			<view class="order_wrap">
				<view class="order_content_top">
					<navigator url="/page_mine/Collection">
						<u-icon name="star"></u-icon>
						<view class="order_name">收藏</view>
					</navigator>
					<navigator url="/page_mine/FootPrint">
						<u-icon name="clock"></u-icon>
						<view class="order_name">历史</view>
					</navigator>
				</view>
				<view class="order_mid">
					<navigator url="/pages/Order?index=0">
						<view class="mid_title">我的捐收</view>
						<view class="all">
							<view class="iconfont icon-xiangyou"></view>
						</view>
					</navigator>
				</view>
				<view class="order_bot">
					<navigator url="/pages/Order?index=0">
						<u-badge numberType="overflow" bgColor="red" max="99" :value="audit" absolute></u-badge>
						<view class="iconfont icon-shenhe"></view>
						<view class="order_name">审核中</view>
					</navigator>
					<navigator url="/pages/Order?index=1">
						<u-badge numberType="overflow" bgColor="red" max="99" :value="publish" absolute></u-badge>
						<view class="iconfont icon-fabu"></view>
						<view class="order_name">已发布</view>
					</navigator>
					<navigator url="/pages/Order?index=2">
						<u-badge numberType="overflow" bgColor="red" max="99" :value="ongoing" absolute></u-badge>
						<view class="iconfont icon-jinhangzhong"></view>
						<view class="order_name">进行中</view>
					</navigator>
				</view>

			</view>

		</view>
		<van-cell-group inset>
			<van-cell is-link size="large" title="地址管理" link-type="navigateTo" url="/page_mine/Address" />
			<van-cell is-link size="large" title="联系客服">
				<button class="contact_btn" open-type="contact" />
			</van-cell>
			<van-cell is-link size="large" title="退出登录" @click="logout" />
		</van-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '',
					name: ''
				},
				audit: 0,
				publish: 0,
				ongoing: 0,
			}
		},
		onShow() {
			this.audit=0,
			this.publish=0,
			this.ongoing=0
			this.checkLogin()
		},
		methods: {
			// 判断是否已登录
			async checkLogin(){
				if (uni.getStorageSync("token")) {
					// 获取用户信息
					const {
						data: res
					} = await this.$myRequest({
						url: '/loginBefore/getMemberInfo',
						header: {
							'content-type': 'application/json;charset:utf-8',
							'token': uni.getStorageSync("token"),
						}
					})
					console.log(res);
					if (res.code == 20000) {
						this.userInfo.avatar = res.data.userInfo.avatar
						this.userInfo.name = res.data.userInfo.name
						// 将用户id放进缓存
						uni.setStorageSync('userId', res.data.userInfo.userId)
					} else if (res.code == 20001) {
						uni.showToast({
							title: '登录已过期,请重新登录!',
							icon: 'none'
						})
						uni.clearStorageSync()
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/Mine/Login'
							})
						}, 2000)
				
					}
				} else {
					uni.showToast({
						title: '请先登录!',
						icon: 'error'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/Mine/Login'
						})
					}, 1000)
				}
				this.getNum()
			},
			// 点击跳转登录页面
			login() {
				uni.navigateTo({
					url: '/pages/Login/Login',
				});
			},
			//退出登录
			logout() {
				uni.clearStorageSync()
				this.userInfo = {
						avatar: '',
						name: ''
					},
					uni.showToast({
						title: '请先登录!',
						icon: 'error'
					});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/Mine/Login'
					})
				}, 1000)
			},
			// 获取不同状态的订单数量放在icon角标
			async getNum() {
				let {
					data: res1
				} = await this.$myRequest({
					url: '/TypeCheck/getAuditGoods/' + uni.getStorageSync('userId')
				})
				if (res1.data) {
					this.audit = res1.data.goods.length
				}
				let {
					data: res2
				} = await this.$myRequest({
					url: '/TypeCheck/publishGoods/' + uni.getStorageSync('userId')
				})
				if (res2.data) {
					this.publish = res2.data.goods.length
				}
				let {
					data: res3
				} = await this.$myRequest({
					url: '/TypeCheck/getOrdering/' + uni.getStorageSync('userId')
				})
				if (res3.data) {
					this.ongoing = res3.data.order.length
				}
			},
			//跳转客服
			handleContact(e) {
				console.log(e.detail.path)
				console.log(e.detail.query)
			}

		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-badge {
		right: 60rpx;
		top: 5rpx;
	}

	.wrapper {
		overflow: auto;
	}

	.default {
		image {
			display:block;
			margin: 40rpx auto 20rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
		}
		button{
			width: 400rpx;
			
		}
	}
	
	.photo {
		display:block;
		margin: 40rpx auto;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}

	.nickname {
		display: flex;
		justify-content: center;
		font-weight: bold;
		font-size: 38rpx;
	}

	.user_menu {
		margin-top: 15rpx;
		background-color: #F6F6F4;
		align-items: center;
		justify-content: center;
		text-align: center;

		.order_wrap {
			margin: 15rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.order_content_top {
				display: flex;
				height: 100rpx;

				navigator {
					display: flex;
					margin: auto;
					padding-top: 15rpx;
					align-items: center;

					.iconfont {
						font-size: 40rpx;
						font-weight: bolder;
					}
				}
			}

			.order_mid {
				padding: 15rpx;
				margin: 12rpx;
				padding-left: 20rpx;
				border-top: 5rpx solid #F6F6F4;

				navigator {
					display: flex;

					.mid_title {
						font-weight: bold;
					}

					.all {
						margin: auto;
						margin-right: 15rpx;
						color: #bfbfbf;
						align-items: center;

						.icon-xiangyou {
							font-size: 30rpx;
						}
					}
				}
			}

			.order_bot {
				display: flex;

				navigator {
					flex: 1;
					padding: 15rpx;
					position: relative;

					.iconfont {
						font-size: 38rpx;
					}

				}
			}
		}
	}

	/deep/ .van-cell-group--inset {
		border-radius: 20rpx;
		margin: 0 15rpx;
		overflow: hidden
	}

	van-cell {
		font-weight: bold;
	}

	.contact_btn {
		position: static !important;
		outline: none;
		border-color: transparent;

		&::after {
			border: none;
		}
	}
</style>
